(function () {
  let rpBoxs = Array.from(rpBox.querySelectorAll('.rp'))
  let allBoxs = Array.from(allPBox.querySelectorAll('.photo_box'))
  let spanList = Array.from(cursor.querySelectorAll('span'))
  let [btnPrev, btnNext] = Array.from(rollP.querySelectorAll('.btn'))

  // 动态绑定轮播图片
  const render = function render() {
    let data = []
    let xhr = new XMLHttpRequest;
    xhr.open('GET', './Alljson/轮播图/data.json', false);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        data = JSON.parse(xhr.responseText);
      }
    };
    xhr.send(null);

    data.forEach((allbox, index) => {
      let { pic } = allbox
      let str = ``
      str += `<img src=${pic} alt=""></img>`
      allBoxs[index].innerHTML = str
    })

    let data2 = []
    let xhr2 = new XMLHttpRequest;
    xhr2.open('GET', './Alljson/轮播图/data2.json', false);
    xhr2.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        data2 = JSON.parse(xhr2.responseText);
      }
    };
    xhr2.send(null);

    data2.forEach((allbox, index) => {
      let { pic } = allbox
      let str = ``
      str += ` <div class="RP" style="background-image: url(${pic});"></div>`
      rpBoxs[index].innerHTML = str
    })
  }
  render()

  //轮播图效果系列操作
  let count = allBoxs.length,
    interval = 5000,
    step = 0,
    timer = null,
    prev = step

  rpBoxs[step].style.cssText = `z-index: 1 ; opacity: 1`
  allBoxs[step].style.cssText = `z-index: 1; opacity: 1`
  spanList[step].className = 'active'

  const pagFocus = function pagFocus() {
    let temp = step
    spanList.forEach((item, index) => {
      item.className = index === temp ? 'active' : ''
    })
  }

  const move = function move() {
    let allboxNow = allBoxs[step]
    let allboxPrev = allBoxs[prev]
    let rpboxNow = rpBoxs[step]
    let rpboxPrev = rpBoxs[prev]
    //先改层级
    allboxNow.style.zIndex = 1
    allboxPrev.style.zIndex = 0
    rpboxNow.style.zIndex = 1
    rpboxPrev.style.zIndex = 0
    //再改透明度
    allboxNow.style.transitionDuration = '0s'
    allboxNow.style.opacity = 1
    rpboxNow.style.transitionDuration = '0s'
    rpboxNow.style.opacity = 1

    // allboxNow.ontransitionend = function () {
    allboxPrev.style.transitionDuration = '0s'
    allboxPrev.style.opacity = 0
    // }

    // rpboxNow.ontransitionend = function () {
    rpboxPrev.style.transitionDuration = '0s'
    rpboxPrev.style.opacity = 0
    // }
    prev = step
    pagFocus()
  }

  const newMove = function newMove() {
    let allboxNow = allBoxs[step]
    let allboxPrev = allBoxs[prev]
    let rpboxNow = rpBoxs[step]
    let rpboxPrev = rpBoxs[prev]
    //先改层级
    allboxNow.style.zIndex = 1
    allboxPrev.style.zIndex = 0
    rpboxNow.style.zIndex = 1
    rpboxPrev.style.zIndex = 0
    //再改透明度
    allboxNow.style.transitionDuration = '1s'
    allboxNow.style.opacity = 1
    rpboxNow.style.transitionDuration = '0s'
    rpboxNow.style.opacity = 1

    allboxNow.ontransitionend = function () {
      allboxPrev.style.transitionDuration = '0s'
      allboxPrev.style.opacity = 0
    }

    rpboxNow.ontransitionend = function () {
      rpboxPrev.style.transitionDuration = '0s'
      rpboxPrev.style.opacity = 0
    }
    prev = step
    pagFocus()
  }


  const moveRight = function moveRight() {
    step++
    if (step >= count) step = 0
    move()
    pagFocus()
  }

  const moveLeft = function moveLeft() {
    step--
    if (step < 0) step = count - 1
    move()
    pagFocus()
  }

  const allMove = function allMove() {
    step++
    if (step >= count) step = 0
    newMove()
    pagFocus()
  }

  if (timer === null) timer = setInterval(allMove, interval)

  //鼠标进入和离开容器，控制自动轮播的暂停和开启
  rollP.onmouseenter = function () {
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }
  rollP.onmouseleave = function () {
    if (timer === null) timer = setInterval(allMove, interval)
  }

  //在浏览器页卡隐藏和显示的时候，控制定时器的暂停和开始
  document.onvisibilitychange = function () {
    //用if return 实现效果和 if else 一样 (方法随意，凭个人喜好)
    if (document.hidden) {
      //当前页卡隐藏了
      if (timer) {
        clearInterval(timer)
        timer = null
      }
      return
    }
    //当前页卡显示了
    if (timer === null) timer = setInterval(allMove, interval)
  }


  btnPrev.onclick = _.throttle(moveRight, 500)
  btnNext.onclick = _.throttle(moveLeft, 500)

  spanList.forEach((item, index) => {
    item.onclick = function () {
      if (step === index) return
      step = index
      move()
    }
  })

})()

// let data = []
// let xhr = new XMLHttpRequest;
// xhr.open('GET', './data.json');
// xhr.onreadystatechange = () => {
//   if (xhr.readyState === 4 && xhr.status === 200) {
//     let data = JSON.parse(xhr.responseText);
//     // resolve(data);
//   }
// };
// xhr.send();




// let FpBoxs = Array.from(pFamily.querySelectorAll('.photo_box'))


// data.forEach((item,index) =>{
//   let {pic} = item
//   let str = ` <img src="${pic}" alt="">`
//    FpBoxs[index].innerHTML =str
// })


// const queryData = function queryData() {
//   return new Promise(resolve => {
//     let xhr = new XMLHttpRequest;
//     xhr.open('GET', './data.json');
//     xhr.onreadystatechange = () => {
//       if (xhr.readyState === 4 && xhr.status === 200) {
//         let data = JSON.parse(xhr.responseText);
//         resolve(data);
//       }
//     };
//     xhr.send();
//   });
// };


// const binding = function binding(data) {
//   let str = ``
//   data.forEach(item => {
//     let { pic } = item
//     str += `<div class="photo_box">
//     <img src="${pic}" alt="">
//   </div>`
//   })
//   return str
// }

// queryData().then(value => {
//   let html = binding(value)
//   pFamily.innerHTML = html
// })
